﻿<%@ page title="Tabs Widget" language="C#" masterpagefile="~/standard.master" codefile="tabs.aspx.cs" inherits="Sample.JQuery.TabsPage" %>
<asp:content id="Content" contentplaceholderid="ContentPlaceHolder" runat="server">
	<div><asp:hyperlink runat="server" id="CodeLink" navigateurl="~/code.aspx?file=tabs&title=Tabs+Widget+Code" text="View Source Code" /></div>
	<div>The server time is <%=DateTime.Now.ToLongTimeString()%>.</div>
	<jquery:tabs runat="server" id="Tabs" cache="true">
		<panels>

			<jquery:tabpanel runat="server" id="WelcomeTab">
				<tab>Welcome</tab>
				<content>
					<p>
						This is the njQuery ASPX implementation of the
						<jquery:themedicon runat="server" icon="ui-icon-newwin" tooltip="Opens in New Window" />
						<a href="http://jqueryui.com/demos/tabs/" target="_blank">jQuery UI Tabs Widget</a>.
					</p>
					<p>
						The tabs that follow demonstrate how the implementation into the ASPX world has been
						made seamless when using various post-back techniques.
					</p>
				</content>
			</jquery:tabpanel>

			<jquery:tabpanel runat="server" id="UpdatePanelTab">
				<tab>Update Panel Post-back</tab>
				<content>
					<asp:updatepanel runat="server" id="UpdatePanel">
						<contenttemplate>
							The server time is <%=DateTime.Now.ToLongTimeString()%>.
							<asp:button runat="server" id="AjaxPostBackButton" text="Submit" />
							<p>
								The post-back on this panel is inside an UpdatePanel control.
								Notice how the timestamp on this panel updates, while the timestamp above does not.
							</p>
						</contenttemplate>
					</asp:updatepanel>
				</content>
			</jquery:tabpanel>

			<jquery:tabpanel runat="server" id="FullPostBackTab">
				<tab>Traditional Post-back</tab>
				<content>
					The server time is <%=DateTime.Now.ToLongTimeString()%>.
					<asp:button runat="server" id="TraditionalPostBackButton" text="Submit" />
					<p>
						The post-back on this page a simple ASPX button control with no UpdatePanel.
						Notice how all timestamps on this page update. Also see how the currently-selected panel remains after post-back.
					</p>
				</content>
			</jquery:tabpanel>

			<jquery:tabpanel runat="server" id="AjaxLoadTab" ajaxcontenturl="~/ajaxloadedcontent.html">
				<tab>AJAX Load</tab>
			</jquery:tabpanel>

		</panels>
	</jquery:tabs>

	<asp:button runat="server" id="SelectFirstTab" text="Select First Tab" />
	<asp:button runat="server" id="SelectUpdatePanelTab" text="Select Update Panel Tab" />

</asp:content>